{{Extend "layout"}}
{{Block "title"}}{{"修改个人资料"|$.T}}{{/Block}}
{{Block "breadcrumb"}}
{{Super}}
<li class="active">{{"修改个人资料"|$.T}}</li>
{{/Block}}
{{Block "head"}}
<link rel="stylesheet" href="{{AssetsURL}}/js/jquery.crop/css/jquery.Jcrop.min.css?t={{BuildTime}}" type="text/css" />
{{/Block}}
{{Block "main"}}

<div class="row">
    <div class="col-md-12">
        <div class="block-flat no-padding">
          <div class="header">							
            <h3>{{"修改个人资料"|$.T}}</h3>
          </div>
          <div class="content">
              <form class="form-horizontal group-border-dashed" data-parsley-validate novalidate method="POST" id="profile-form" data-secret="{{SM2PublicKey}}:{{call $.Func.EnvKey}}" action="{{BackendURL}}/user/edit">
              <div class="form-group">
                  <label class="col-sm-2 control-label">{{"头像"|$.T}}</label>
                  <div class="col-sm-8">
                    <div class="avatar-upload">
                      {{$avatar := $.Form "avatar" $.Stored.user.Avatar}}
                      <img src="{{if $avatar}}{{AddSuffix $avatar "_200_200"}}{{else}}{{AssetsURL}}/images/user_128.png{{end}}" class="profile-avatar img-thumbnail" onerror="this.onerror=null;this.src='{{AssetsURL}}/images/user_128.png';" />
                      <input id="fileupload" type="file" name="files[]">
                      <input type="hidden" id="avatar-image" name="avatar-small" value="{{if $avatar}}{{AddSuffix $avatar "_200_200"}}{{end}}" />
                      <input type="hidden" id="avatar-image-original" name="avatar" value="{{$avatar}}" />
                      <div id="progress" class="overlay"></div>
                    </div>
                  </div>
                </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">UID</label>
                <div class="col-sm-8">
                    <span class="form-control no-border">{{$.Stored.user.Id}}</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">{{"用户名"|$.T}}</label>
                <div class="col-sm-8">
                    <span class="form-control no-border">{{$.Stored.user.Username}}</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">{{"Email"|$.T}}</label>
                <div class="col-sm-8">
                    <input type="email" data-parsley-trigger="change" required class="form-control" name="email" value="{{($.Form "email")|Default $.Stored.user.Email}}">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">{{"手机号码"|$.T}}</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" data-parsley-trigger="change" required name="mobile" value="{{($.Form "mobile")|Default $.Stored.user.Mobile}}">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-8">
                    <label>
                    <input type="checkbox" data-parsley-trigger="change" name="modifyPass" value="1"{{if $.Form "modifyPass"}} checked{{end}}>
                    {{"修改密码"|$.T}}</label>
                </div>
              </div>
              <div class="form-group new-password">
                <label class="col-sm-2 control-label">{{"新密码"|$.T}}</label>
                <div class="col-sm-8">
                    <input type="password" id="newPass" data-parsley-trigger="change" class="form-control" name="newPass" value="{{$.Form "newPass"}}">
                </div>
              </div>
              <div class="form-group new-password">
                <label class="col-sm-2 control-label">{{"确认新密码"|$.T}}</label>
                <div class="col-sm-8">
                    <input type="password" data-parsley-equalto="#newPass" data-parsley-trigger="change" class="form-control" name="confirmPass" value="{{$.Form "confirmPass"}}">
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">{{"密码验证"|$.T}}</label>
                <div class="col-sm-8">
                    <input type="password" data-parsley-trigger="change" required class="form-control" name="pass" value="{{$.Form "pass"}}" placeholder="{{"旧密码"|$.T}}">
                </div>
              </div>
              {{if $.Stored.needCheckU2F}}
              <div class="form-group">
                <label class="col-sm-2 control-label">{{"两步验证"|$.T}}</label>
                <div class="col-sm-8">
                    <input type="password" data-parsley-trigger="change" required class="form-control" name="u2fCode" value="{{$.Form "u2fCode"}}" placeholder="{{"输入两步验证设备上显示的密码"|$.T}}">
                    <div class="help-block">{{"输入两步验证设备上显示的密码"|$.T}}</div>
                </div>
              </div>
              {{end}}
              <div class="form-group">
                  <label class="col-sm-2 control-label">{{"性别"|$.T}}</label>
                  <div class="col-sm-8">
                    {{$v := $.Form "gendar"}}
                    <div class="radio radio-primary radio-inline">
                      <input type="radio" value="secret" name="gendar" id="gendar-secret"{{if or (eq $v "secret") (eq $v "")}} checked{{end}}> <label for="gendar-secret">{{"保密"|$.T}}</label>
                    </div>
                    <div class="radio radio-primary radio-inline">
                      <input type="radio" value="female" name="gendar" id="gendar-female"{{if eq $v "female"}} checked{{end}}> <label for="gendar-female">{{"女"|$.T}}</label>
                    </div>
                    <div class="radio radio-primary radio-inline">
                      <input type="radio" value="male" name="gendar" id="gendar-male"{{if eq $v "male"}} checked{{end}}> <label for="gendar-male">{{"男"|$.T}}</label>
                    </div>
                  </div>
              </div>
              <div class="form-group form-submit-group">
				<div class="col-sm-9 col-sm-offset-2">
					<button type="submit" class="btn btn-primary btn-lg"><i class="fa fa-save"></i> {{"保存"|$.T}}</button>
					<button type="reset" class="btn btn-default btn-lg"><i class="fa fa-refresh"></i> {{"重置"|$.T}}</button>
				</div>
			  </div>
            </form>
          {{Include "modal_crop_image"}}
          </div><!-- /.content -->
        </div><!-- /.block-flat -->
    </div>
</div>
{{/Block}}
{{Block "footer"}}
<script src="{{AssetsURL}}/js/jquery.upload/js/vendor/jquery.ui.widget.min.js?t={{BuildTime}}"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/jquery.crop/js/jquery.Jcrop.min.js?t={{BuildTime}}"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="{{AssetsURL}}/js/jquery.upload/js/jquery.iframe-transport.min.js?t={{BuildTime}}"></script>
<!-- The basic File Upload plugin -->
<script src="{{AssetsURL}}/js/jquery.upload/js/jquery.fileupload.min.js?t={{BuildTime}}"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/crypto/crypto-js.min.js?t={{BuildTime}}"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/crypto/sm2.min.js?t={{BuildTime}}"></script>
<script type="text/javascript" src="{{AssetsURL}}/js/crypto/helper.min.js?t={{BuildTime}}"></script>
<script type="text/javascript">
$(function(){
  $('input[name="modifyPass"]').on('click',function(){
      if($(this).prop('checked')){
          $('.new-password').show();
      }else{
          $('.new-password').hide();
      }
  });
  if($('input[name="modifyPass"]').prop('checked')){
      $('.new-password').show();
  }else{
      $('.new-password').hide();
  }
  cropImage('{{BackendUploadURL "avatar" "refid" $.Stored.user.Id}}',"#avatar-image",'#avatar-image-original');
  submitEncryptedData('#profile-form');
});
</script>
{{/Block}}